<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Card Component</title>
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="browser.min.js"></script>
</head>
<body>

    <div id="Container"></div>
        <script type="text/babel">

            class TopView extends React.Component {
                render(){
                    let  topViewStyle = {
                        height:150,
                         width:150,
                        backgroundColor:this.props.showColor
                };
                    return (
                      <div style={topViewStyle}>TOP</div>
                    );
                }
            }

            class  BottomView extends React.Component {
                render(){
                    let bottomStyle = {
                        width:150
                    };
                    return(
                        <div style={bottomStyle}>{this.props.showColor}</div>
                    );
                }
            }

            class  Card extends React.Component {
                render(){

                    let CardStyle = {
                        height:200,
                        width:150,
                        backgroundColor:"#e0e0e0"
                    }
                    return (
                        <div style={CardStyle}>
                            <TopView {...this.props}/>
                            <BottomView {...this.props}/>
                        </div>
                    )
                }
            }

            let container  = document.querySelector('#Container');
            ReactDOM.render(
                    <div>
                        <Card showColor="#FF6683"/>
                    </div>,
                container
            )
        </script>
</body>
</html>